<template>
	<view class="app">
        <load :ready="ready"></load>
		
		<u-navbar back-icon-name="none" :background="background" :gap="false" back-icon-size="30" :border-bottom="false"></u-navbar>
		<view class="head">
			<image src="/static/logo.png" class="logo" mode="widthFix"></image>
		</view>
        <view class="login-form">
			<view class="title">欢迎登录飞虹燃气配送端</view>
            <view class="form-item">
				<text>手机</text>
				<view style="flex: 1;">
				<u-input placeholder="请输入您的账号" v-model="form.mobile" height="110" :custom-style="{
					padding: '0 10px',
				}"></u-input>
				</view>
            </view>
			
			<view class="form-item">
				<text>验证码</text>
				<view style="flex: 1;">
					
				<u-input type="number" placeholder="请输入验证码" v-model="form.verify_code" height="110" :custom-style="{
					padding: '0 10px',
				}"></u-input>
				</view>
				<!-- <text @click="verifyFasong">{{verCode.text}}</text> -->
				<view
				    class="getcode"
				    :class="{
				        active: verCode.isDownIng
				    }"
				    @tap="getCode"
				>
				    {{ verCode.text }}
				</view>
			</view>
			
			<view class="arg-wrap">
				<u-checkbox  
					v-model="arg" >
					同意<text @click.stop="link(`/pages/index/agreement`)">《用户协议》</text>
					</u-checkbox>
			</view>
            <u-button type="primary" shape="circle" :loading="isLoading" @click="submit" :custom-style="btnStyle">登录</u-button>
			
        </view>
		
		<tfgg-verify ref="verifyElement" @result="verifyResult" /> 
	
    </view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
import tfggVerify from '@/components/tfgg-verify/tfgg-verify.vue';

let that;
export default {
    mixins:[mixinsBase],
	components: {
		"tfgg-verify":tfggVerify
	},
	data() {
		
		let form = {
			"verify_code": "",
			"mobile": "",
			"code":'',
		}
		if(this.$config.debug){
			form ={
				// "verify_code": "999999",
				// "mobile": "15999909857",
				// "code":'',
				//13973292562   配送
				// 13580052553  司机
			}
		}
		return {
            navbar:{},
             ready: true,
             // listTip: null,
             btnStyle: this.$config.btnStyle,
             verCode: {
                 text: '获取验证码',
                 code: '',
                 isDownIng: false,
                 i: 60,
                 t: null,
             },
			 form,
             background:{
                 backgroundColor: 'rgba(0,0,0,0)'
             },
             lineStyle:{
                 right: '20rpx',
                 bottom:'4px'
             },
             errText:'账号或密码错误，请重新输入',
			 isLoading:false,
			 arg: false,
			 
		};
	},
	onLoad() {
        that=this;
		uni.removeStorageSync('userInfo')
		uni.removeStorageSync('token')
		this.setUserInfo(null);
	},
    onShow(){
        // #ifdef H5
        this.$common.h5SetTitle('');
        // #endif
    },
    onUnload(){
        that=null
    },
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {
  //       return {
		// 	// path,
		// 	imageUrl:config.shareImg,
		// 	// title
		// }
	},
	methods: {
		async getCode() {
		    this.$common.getCode(that, 'regCaptcha');
		},
		/* 校验结果回调函数 */
		verifyResult(res){
			if(res){
				this.$refs.verifyElement.reset();//校验成功重置插件
				console.log('验证成功')
				 this.$common.getCode(this, 'regCaptcha');
			}
			console.log(res);
		},
		/* 显示校验弹窗 */
		verifyFasong(){
			if (this.verCode.isDownIng) {
			    return false;
			}
			this.$refs.verifyElement.show();
		},
		/* 校验插件重置 */
		verifyReset(){
			this.$refs.verifyElement.reset();
		},
		async submit() {
			if(!this.arg){
				this.$message.error('同意协议才能登录账号');
				return;
			}
			if (this.isLoading) return;
			if (!this.form.mobile.length) {
				this.$message.error('请输手机号');
				return;
			}
			if (!this.form.verify_code.length) {
			 this.$message.error('请输入验证码');
				return;
			}
			this.isLoading = true;
			wx.requestSubscribeMessage({
				 // tmplIds: ['Agy_xdvaFCZTjnm9HbOeUDE_DKlo8ySlBr3I1H1Zkhw','wWkNelB7_H8RuaOnWr53lsOA9MIEnpIec9NzW7P2z9o'],
				  tmplIds: ['N-jjtMKUQQIOuDUu-Hf8KkwLrxfWyBTqBvP3Ep9Bok8'],
				success: res=>{
					console.log(res)
					this.next();
				}, 
				fail:(err)=>{
					console.log(err);
					this.next();
				},
			})
		},
		async next(){
			let params = {
				...this.form
			}
			let [lErr,lRes] = await uni.login();
			if(lRes && lRes.code){
				params.code = lRes.code
			}
			let res;
			try{
				res = await this.$api.login(params);
			}catch(err){
				this.$message.error(JSON.stringify(err.errMsg));
				this.isLoading = false;
				return
			}
			res = res.data;
			this.isLoading = false;
			console.log(res)
			
			if (res.code == this.$config.RESOK) {
				let userInfo = this.$user.normalFilter({
					...res.data,
				});
				this.$message.success('登录成功');
				uni.setStorageSync('token', userInfo.token);
				console.log(JSON.stringify(userInfo));
				this.setUserInfo(userInfo);
				setTimeout(() => {
					uni.redirectTo({
						url: res.data.dtype == 1 ? '/pages/navbar/user' : '/pages/user/driver'
					});
				}, this.$config.timeLoad);
			} else {
				this.$message.error(res.msg);
			}
		},
        ...mapActions(['setUserInfo']),
	},
	computed: {
        getBtnStyle(){
            let style = {};
            if(this.verCode.isDownIng){
               style = Object.assign({}, this.$config.btnStyle3,{
                    height: '80rpx',
                    lineHeight: '80rpx',
                    fontSize:'13px',
                    width:'30%'
                })
            } else{
                style = Object.assign({}, this.$config.btnStyle2,{
                     height: '80rpx',
                     lineHeight: '80rpx',
                     fontSize:'13px',
                     width:'30%'
                 })
            }
            return style;
        },
		...mapState({
			userInfo: 'userInfo',
		})
	},
};
</script>

<style lang="scss">
	page{
		background: $color;
	}
</style>
<style scoped lang="scss">
@import '@/common/css/login.scss';
.head{
	background: $color;
	text-align: center;
	padding: 40rpx 0;
	.logo{
		width: 400rpx;
		
	}
}
.arg-wrap{
	font-size: 13px;
	margin-bottom: 40rpx;
	padding: 30rpx 0;
	text{
		color: $color;
	}
}
.login-form{
	background: #fff;
	margin: 0 20rpx;
	padding: 40rpx 30rpx;
	border-radius: 5px;
}
.title{
	font-size: 20px;
	font-weight: bold;
}
</style>



